<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">岗位管理</block>
		</cu-custom>
		
		<view class="state_switch flex">
			<view class="underway_box border_leftraduis"   :class="a==1?'underway_bg':'underway'"  @click="isActive(1)">
				<text class="recruit_text">招募中</text>
			</view>
			<view class="underway_box border_line border_rightraduis" :class="a==2?'underway_bg':'underway'"  @click="isActive(2)">
				<text class="recruit_text">停止招募</text>
			</view>
		</view>
		<block>
			<view class="classify_box" v-if="list!=''">
				<view v-for="(item,index) in list" :key="index" class="details_list flex" @click="to_postDetail(item.job_id)">
					<view class="classify_list">
						<view class="person_text">
							<text>{{item.job_name}}</text>
						</view>
						<view class="require_text">
							<text>{{item.city}} | {{item.workage}} | {{item.qualifications}}</text>
						</view>
					</view>
					<view>
						<text class="cuIcon-right right_box"></text>
					</view>
				</view>
			</view>
			<view class="nodata" v-if="list==''&&a==1">暂无招募岗位</view>
			<view class="nodata" v-if="list==''&&a==2">暂无停止岗位</view>
		</block>		
		<view style="height: 200rpx;"></view>
		
		<view class="cu-bar tabbar bg-white foot" >
			<button class="submit_but" @tap="to_addpost()">新增</button>	
		</view>
	</view>
</template>

<script>
	const {appLogin,httpGet,httpPost} = require("@/utils/common.js")
	export default {
		data() {
			return {
				a: true,
				status: 1,
				page:1,
				page_size:'10',
				list:[],
			}
		},
		onLoad() {
			appLogin((user_info)=>{
				// this.display()
			})
		},
		onShow(){
			this.page = 1;
			this.list = [];
			// 清空列表
			this.display()
			// 回到页面展示
		},
		onReachBottom(){   // 页面滚动到底部
			console.log(2222)
			this.page++
			this.display()
		},
		methods: {
			isActive(a){
				if(this.a != a){
					this.a = a
					this.status = this.a==1?1:-1
					this.page = 1;
					this.list = [];
					this.display()
				}
			},
			display(){
				httpGet({
					url:'/api/company/job_list',
					data:{
						status:this.status,
						page:this.page,
						page_size:this.page_size
					}
				}).then(res => {
					console.log(res)
					this.list = this.list.concat(res.result.list)
					// 把两个列表加一起
				})
			},
			to_addpost(){
				uni.navigateTo({
					url:'add_post'
				})
			},
			to_postDetail(job_id){
				uni.navigateTo({
					url:'post_detail?job_id='+job_id
				})
			}
		}
	}
</script>

<style>

	.postmanage_box{
		height: 135rpx;
		text-align: center;
		font-size: 39rpx;
		color: #FFFFFF;
		background-color: #3b73f6;
		padding-top: 73rpx;
	}

	.state_switch{
		height: 133rpx;
		/* margin-top: 30rpx; */
		padding-left: 140rpx;
	}
	
	.underway_box{
		border-style: solid;
		border-width: 2rpx;
		border-color: #3b73f6;
		width: 230rpx;
		height: 58rpx;
		background-color: #FFFFFF;
		text-align: center;
		margin-top: 30rpx;
		color: #3b73f6;
	}
	
	.underway_bg{
		background-color: #3b73f6;
		color: #FFFFFF;
	}
	
	.underway{
		background-color: #FFFFFF;
		color: #3b73f6;
	}
	
	
	.border_line{
		border-left-style: none;
	}

	.border_leftraduis{
		border-radius: 15rpx 0 0 15rpx;
	}
	
	.border_rightraduis{
		border-radius: 0 15rpx 15rpx 0;
	}

	.recruit_text{
		line-height: 58rpx;
		font-size: 30rpx;
	}
	
	.classify_box{
		background-color: #FFFFFF;
	}
	
	.details_list{
		height: 192rpx;
		border-bottom-style: solid;
		border-color: #eeeeee;
		border-width: 3rpx;
		position: relative;
	}
	
	.classify_list{
		margin-left: 30rpx;
		margin-top: 51rpx;
	}
	
	.person_text{
		font-size: 32rpx;
		color: #333333;
	}
	
	.require_text{
		font-size: 25rpx;
		color: #666666;
		margin-top: 29rpx;
	}
	
	.right_box{
		font-size: 30rpx;
		color: #bcbcbc;
		position: absolute;
		right: 18rpx;
		margin-top: 80rpx;
	}
	
	.cancel_but{
		border-radius: 90rpx;
		border-width: 1rpx;
		border-style: solid;
		border-color: #3b73f6;
		text-align: center;
		height: 80rpx;
		width: 335rpx;
		line-height: 80rpx;
		color: #3b73f6;
		font-size: 30rpx;
	}
	
	.submit_but{
		border-radius: 90rpx;
		border-width: 1rpx;
		border-style: solid;
		background-color: #3b73f6;
		text-align: center;
		height: 80rpx;
		width: 690rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	.nodata{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx;
		font-size: larger;
	}
</style>
